<template>
	<view class="food-list-container" v-for="item in foodList" @click="toDetailPages(item._id)">
		<image :src="item.imagePath" class="foodImg"></image>
		<view class="food-list-container-right">
			<text class="food-name">{{ item.name }}</text>
			<view class="ingredient-list">
				<text class="ingredient-list-item">{{ item.ingredient.map(item=>item.name).join('、')}}</text>
			</view>
			<view class="flex-bt">
				<view class="product-info">
					<text>180.0万</text>
					<image src="/static/mengbanzu278.png" class="watch-img"></image>
				</view>
				<view class="product-info">
					<text>3.9万</text>
					<image src="/static/mengbanzu279(1).png" class="collect-img"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	defineProps(['foodList']);
	function toDetailPages(_id){
		uni.navigateTo({
			url:'/cookbookPackage/pages/detail/detail?_id='+_id
		})
	}
</script>

<style scoped lang="scss">
	.food-list-container {
		display: flex;
		margin-bottom: 16rpx;
	}

	.foodImg {
		width: 314rpx;
		height: 210rpx;
		background-image: linear-gradient(90deg,
			);
		border-radius: 16rpx;
	}

	.food-list-container-right {
		margin-left: 18rpx;
	}

	.food-name {
		font-size: 28rpx;
	}

	.ingredient-list {
		width: 282rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 20rpx;
		margin-bottom: 64rpx;
	}

	.ingredient-list-item {
		white-space: nowrap;
		font-size: 22rpx;
		color: #aaaaaa;

	}

	.product-info {
		font-size: 22rpx;
		color: #aaaaaa;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.watch-img {
		margin-left: 5rpx;
		width: 28rpx;
		height: 22rpx;
	}

	.collect-img {
		margin-left: 5rpx;
		width: 24rpx;
		height: 24rpx;
		margin-right: 50rpx;
	}
</style>